.root {
  position: relative;
  z-index: 5;
  background-color: var(--mantine-color-body);
  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));

  --hp-column-max-width: calc(50vw - calc(var(--mantine-spacing-lg) / 2));
  --hp-block-spacing: 120px;

  @mixin smaller-than $mantine-breakpoint-md {
    --hp-column-max-width: calc(100vw - 48px);
    --hp-block-spacing: 40px;
  }

  --hp-primary-bg:
    linear-gradient(45deg, var(--mantine-color-blue-6) 15%, var(--mantine-color-blue-7)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent),
    linear-gradient(45deg, rgba(0, 0, 0, 0.3) 15%, transparent);
  --hp-primary-shadow: 0px 0px 15px 2px alpha(var(--mantine-color-blue-filled), 0.2);
  --hp-primary-border: 3px solid var(--mantine-color-blue-7);

  @mixin dark {
    --hp-primary-bg:
      linear-gradient(45deg, var(--mantine-color-blue-7) 15%, var(--mantine-color-blue-8)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent),
      linear-gradient(45deg, rgba(0, 0, 0, 0.3) 15%, transparent);
    --hp-primary-shadow: 0px 0px 15px 2px alpha(var(--mantine-color-blue-5), 0.3);
    --hp-primary-border: 3px solid var(--mantine-color-blue-8);
  }
}
